<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale:1.0">
  <title>对话窗口</title>
  <style>
    body {
      --font: 100%;
      padding: 0;
      margin: 0;
      font-size: 14px;
    }
    a
    {
      text-decoration: none;
    }
    .zixuncontainer
    {
      width:100vw;
      height:100vh;
      display:grid;
      grid-template-rows:42px auto 65px;
    }
    .zixunitems:nth-of-type(1)
    {
      background-color: #393a3f;
      position: relative;
      /*background-image: url("https://dct.zoosnet.net/LR/ChatM3Img/down.png");*/
      /*background-position:right;*/
      /*background-repeat: no-repeat;*/
      /*background-position-X:353px;*/
      /*background-size: 25px;*/
    }
    .zixunitems:nth-of-type(1) img
    {
      position:absolute;
      top:50%;
      transform: translateY(-50%);
      right:10px;
      width: 25px;
    }
    .zixunitems:nth-of-type(2)
    {
      background-color: #ebebeb;
      padding:20px;
    }
    .zixunitems:nth-of-type(2) span
    {
      font-size: 10px;
      display: block;
      margin: 20px 0;
      text-align: center;
      letter-spacing: 2px;
      color:#999999;
    }
    .zixunitems:nth-of-type(3)
    {
      background-color: white;
    }
    .zixunitems:nth-of-type(3) span
    {
      font-size: 10px;
      display: block;
      margin: 5px 0;
      text-align: center;
      letter-spacing: 2px;
      color:#999999;
    }
    .white
    {
      background-color:white;
      padding:15px;
      border-radius: 8px;
    }
    .white p
    {
      line-height: 21px;
    }
    .white i
    {
      font-style: normal;
      color:#e53333;
    }
    .flex
    {
      margin-top:10px;
      display:flex;
      align-items: center;
      justify-content: space-between;
    }
    /*input*/
    /*{*/
    /*  width:calc(100% - 80px);*/
    /*  !*width:20px;*!*/
    /*  height:30px;*/
    /*  border: none;*/
    /*  border-bottom:1px solid #45c01a;*/
    /*  outline: none;*/
    /*  word-break: break-word;*/
    /*}*/
    textarea
    {
      font-size: 20px;
      height: 25px;
      width:calc(100% - 80px);
      border: none;
      border-bottom:1px solid #45c01a;
      outline: none;
      margin: 0 10px;
    }
    .xiaolian
    {
      width:30px;
      height:30px;
      /*background-color: red;*/
      background-image: url('https://dct.zoosnet.net/LR/ChatM3Img/emoticon.png');
      background-position: center;
      background-repeat: no-repeat;
      background-size: 30px;
    }
    .jiahao
    {
      width:30px;
      height:30px;
      /*background-color: red;*/
      background-image: url('https://dct.zoosnet.net/LR/ChatM3Img/function.png');
      background-position: center;
      background-repeat: no-repeat;
      background-size: 30px;
      display:block;
    }
    .fason
    {
      width:60px;
      height:40px;
      background-color: #45c01a;
      color:white;
      border-radius: 5px;
      text-align: center;
      line-height: 40px;
      display:none;
    }
    .onc
    {
      display:none;
      /*visibility: hidden;*/
      margin-top:30px;
      background-image: url("../image/dianji.png");
      background-size: 12px;
      background-position:center;
      background-position-X:115px;
      background-repeat: no-repeat;
      text-align: center;
      font-size: 10px;
      color:#58595b;
    }
    .onc img
    {
      width:20px;
      padding-top: 20px;
    }
    .fasonimg
    {
      width:36px;
      height:36px;
      border-radius: 50%;
      background-image: url('https://dct.zoosnet.net/site/15084268/chat_left_img_share_cn.jpg');
      background-repeat: no-repeat;
      background-position:center;
      background-size: 36px;
      margin-right: 10px;
      flex:0 0 36px;
    }
    .fasonimg2
    {
      width:36px;
      height:36px;
      border-radius: 50%;
      background-image: url('https://dct.zoosnet.net/site/15084268/chat_left_img_share_cn.jpg');
      background-repeat: no-repeat;
      background-position:center;
      background-size: 36px;
      margin-right: 10px;
      flex:0 0 36px;
      position:absolute;
      right: 0;
    }
    .fasona
    {
      display:flex;
      margin-bottom:10px;
    }
    .fasona2
    {
      display:flex;
      margin-bottom:60px;
    }
    .teach
    {
      background-color: white;
      padding:10px;
      border-radius: 7px;
      position: relative;
    }
    .teach2
    {
      background-color: white;
      padding:10px;
      border-radius: 7px;
      position: absolute;
      right: 60px;
    }
    .teach::after
    {
      display:block;
      content:'';
      border: 8px solid white;
      position:absolute;
      left:-14px;
      top:50%;
      transform: translateY(-50%);
      border-color:transparent white transparent transparent;
    }
    .teach2::after
    {
      display:block;
      content:'';
      border: 8px solid white;
      position:absolute;
      right:-14px;
      top:50%;
      transform: translateY(-50%);
      border-color:transparent transparent transparent white;
    }
    .teach p
    {
      line-height: 20px;
    }
    .teach p:nth-of-type(1)
    {
      font-size:10px;
      color:#58595b;
    }
    .teach2 p
    {
      line-height: 20px;
    }
    .teach2 p:nth-of-type(1)
    {
      font-size:10px;
      color:#58595b;
    }
    *
    {
      padding:0;
      margin:0;
      box-sizing: border-box;
    }



  </style>
</head>
<body>
<div class="container">
  <div class="zixuncontainer">
    <div class="zixunitems">
      <a href="../HTML/APP.html"><img src="https://dct.zoosnet.net/LR/ChatM3Img/down.png"></a>
    </div>
    <div class="zixunitems">
      <div class="white">
        <p>您好，欢迎咨询东方启音！</p>
        <p>
          东方启音是国内专注于帮助儿童克服发育及学习障碍，
          提供专业<i>儿童言语发展</i>及<i>早期筛查</i>、<i>干预服务</i>的专业机构。
          通过引进国际先进言语训练技术，受国际、国内专家顾问团队的监督，
          研发出能妥善保障儿童发展的优质本土化课程，并提供国际化、专业化、
          多元化的综合服务，目前已进驻<i>19个城市</i>，拥有近<i>50家线下直营中心</i>。
        </p>
        <p>
          全国统一客服热线：400-000-6069
        </p>
      </div>
      <span>东方启音在线-老师正在和您进行对话..</span>
      <div class="fasona">
        <div class="fasonimg"></div>
        <div class="teach">
          <p>东方启音在线-老师</p>
          <p>您好,我是您的课程顾问文鹏老师,请问有什么可以帮到您？</p>
        </div>
      </div>
    </div>
    <div class="zixunitems">
      <div class="flex">
        <div class="xiaolian"></div>
<!--        <input type="text" placeholder="请在此输入">-->
        <textarea autofocus placeholder="请在此输入"></textarea>
        <div class="jiahao"></div>
        <div class="fason">发送</div>
      </div>
      <span>咨询软件由忠仕网站商务通提供</span>
      <p class="onc">点击返回对话窗口</p>
    </div>
  </div>
</div>
<script>
  var focus = document.querySelector('textarea');
  var zixun = document.querySelector('.zixuncontainer')
  var jiahao = document.querySelector('.jiahao')
  var fason=document.querySelector('.fason')
  var onc=document.querySelector('.onc')
  var img=document.querySelector('.zixunitems:nth-of-type(1) img')
  var onc2=document.querySelector('.zixunitems:nth-of-type(2)')
  focus.onclick = function(e)
  {
    e.stopPropagation()
    zixun.style.gridTemplateRows = '42px auto 690px'
    onc.style.display='block'
    onc.style.marginTop = '50px'
    // console.log(zixun)
  }
  focus.oninput = function()
  {
    if(focus.value)
    {
      fason.style.display='block'
      jiahao.style.display='none'
    }
    else
    {
      fason.style.display='none'
      jiahao.style.display='block'
    }
  }
  zixun.onclick = function()
  {
    onc.style.display='none'
    zixun.style.gridTemplateRows = '42px auto 65px'
  }
  // var fasona=document.querySelector('.fasona')
  fason.onclick = function(e)
  {
    e.stopPropagation()
    // console.log(focus.value)
    var fasondiv=document.createElement('div')
    fasondiv.className='fasona2'
    var fasonimg=document.createElement('div')
    fasonimg.className="fasonimg2"
    fasonimg.style.backgroundImage='url(../image/R-C.jpg)'
    var fasondiv2=document.createElement('div')
    fasondiv2.className="teach2"
    var pa=document.createElement('p')
    pa.innerText='一级卷王'
    var pb=document.createElement('p')
    pb.innerText=focus.value
    fasondiv2.appendChild(pa)
    fasondiv2.appendChild(pb)
    fasondiv.appendChild(fasonimg)
    fasondiv.appendChild(fasondiv2)
    var fasonaaa=document.createElement('div')
    fasonaaa.className='fasona'
    fasonaaa.appendChild(fasondiv)
    onc2.appendChild(fasonaaa)
    focus.value=''
    if(!focus.value)
    {
      fason.style.display='none'
      jiahao.style.display='block'
    }
  }

</script>
</body>
</html>